<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/admin/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-table
      :data="rightsList.slice((pagenum-1)*pagesize,pagenum*pagesize)"
      stripe
      
    >
      <el-table-column type="index"></el-table-column>
      <el-table-column label="权限名称" prop="authName"></el-table-column>
      <el-table-column label="路径" prop="path"></el-table-column>
      <el-table-column label="权限等级" prop="level">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.level=='0'? true : false">一级权限</el-tag>
          <el-tag v-if="scope.row.level=='1'? true : false" type="success">二级权限</el-tag>
          <el-tag v-if="scope.row.level=='2'? true : false" type="warning">三级权限</el-tag>
        </template>
      </el-table-column>
    </el-table>

    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagenum"
        :page-sizes="[10,20,30,40]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      rightsList: [],
      pagenum: 1, //当前页码数
      pagesize: 2, //每页显示得条数
      total: 0 //总条数
    };
  },
  mounted() {
    this.getRightsList();
  },
  methods: {
    getRightsList() {
      // const { data: res } = await this.$http.get("right/list");

      let url = this.$store.state.baseUrl;
      this.$axios.get(`${url}rights/list `).then(res => {
        console.log(res);
        if (res.meta.status !== 200)
          return this.$message.error("获取权限列表失败");
        //如果返回状态正常，将请求的数据保存在data中
        this.rightsList = res.data;
        this.total = this.rightsList.length;
        console.log(this.rightsList);
      });

      //如果返回状态为异常状态则报错并返回
      // if (res.meta.status !== 200)
      //   return this.$message.error("获取权限列表失败");
      // //如果返回状态正常，将请求的数据保存在data中
      // this.rightsList = res.data;
      // this.total =  this.rightsList.length
      // console.log(this.rightsList);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pagenum = val;
    }
  },
  computed: {},
  watch: {}
};
</script>

<style lang="scss">
.el-icon-arrow-right {
  margin-bottom: 60px;
}
</style>